<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/animate.css" rel="stylesheet">

    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/jquery.lettering.js"></script>
    <script src="../js/jquery.textillate.js"></script>
    <script>
        $(function () {
            $('.text1').textillate({ in: { effect: 'rollIn' } });
            $('.text2').textillate({
                initialDelay: 1000, 	//设置动画开始时间
                in: {
                    effect: 'flipInX'	//设置动画名称
                }
            });
            $('.text3').textillate({
                initialDelay: 9000,
                in: { effect: 'bounceInDown' }
            });
        })

    </script>
    <style>
        html {
            height: 100%;
            /* background: url(https://images.unsplash.com/photo-1570475735025-6cd1cd5c779d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/cover #aaa; */
            background: url(../img/pink.jfif) 50%/cover #aaa;
            background-blend-mode: overlay;
        }

        .page {
            overflow: hidden;
            position: relative;
            margin: 3.5em auto;
            border: solid 2em transparent;
            width: 80%;
            height: 70vh;
            max-width: 37.5em;
            background: #fff padding-box;
            -webkit-clip-path: polygon(0 6.25em, 6.25em 0, calc(100% - 6.25em) 0, 100% 6.25em, 100% 100%, 0 100%);
            clip-path: polygon(0 6.25em, 6.25em 0, calc(100% - 6.25em) 0, 100% 6.25em, 100% 100%, 0 100%);
            -webkit-filter: drop-shadow(0 1px 3.5px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 3.5px rgba(0, 0, 0, 0.2));
        }

        .page::before,
        .page::after {
            --i: 0;
            --sgni: calc(2*var(--i) - 1);
            position: absolute;
            top: -2em;
            left: calc(var(--i)*100% + var(--sgni)*2em - .5*8.83883em);
            width: 8.83883em;
            height: .5em;
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            -webkit-transform: rotate(calc(var(--sgni)*45deg)) translatey(4.41942em);
            transform: rotate(calc(var(--sgni)*45deg)) translatey(4.41942em);
            background: radial-gradient(at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 65%);
            content: "";
        }

        .page::after {
            --i: 1;
        }

        /* 打字 */
        .text1,
        .text2,
        .text3 {
            visibility: hidden;
        }

        .text1,
        .text2 {
            color: rgb(38, 244, 56);
            color: rgb(61, 122, 245);
        }

        .text1 {
            margin: 50px;
            text-align: center;
            font-size: 30px;
            text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8);
        }

        .text2 {
            font-family: microsoft yahei;
            font-size: 14px;
            line-height: 24px;
            text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.8)
        }

        .text3 {
            font-family: microsoft yahei;
            text-align: center;
            font-size: 20px;
            color: pink;

            cursor: pointer;
            transform: translateX(35%);
        }

        .text {
            margin: 0 70px;
        }
    </style>
</head>

<body>
    <div class='page'>
        <!-- print -->
        <div class="text">
            <p class="text1">打字效果</p>
            <p class="text2">贴得更近了。 Susan自觉往旁边避了一步，不慎踩中别人一脚。那人旁边两个小秘，
                正要开口骂，不料被踩者看见Susan抱歉的笑，顿时一退，“Sony，Sony”　　不停。两个鬼怪故事里出来的女妖想替老板伸冤未果，齐咧咧打白眼。　　再走一程，
                Susan担心和沈溪儿一散不聚，要下楼去找。雨翔开导她：“‘人找人，
            </p>
            <p class="text3"><a href="">去看烟花</a></p>
        </div>
    </div>

    <script>
        var jump = document.querySelector('.text3')
        jump.onclick = function () {
            window.location.href = "./烟花.html"
        }
    </script>
</body>

</html>